<template>
	<view class="apps">
		<uv-gap height="20rpx" bgColor="#f8f9ff"></uv-gap>
		<uv-swiper :list="banner" keyName="image"  @click="swiperHandle(e)" height="230"></uv-swiper>
		<uv-gap height="20rpx" bgColor="#f8f9ff"></uv-gap>
		<uv-notice-bar :text="notice" direction="column" @click="noticeLink" color="#3c9cff" bgColor="#badafb"></uv-notice-bar>
		<uv-gap height="20rpx" bgColor="#f8f9ff"></uv-gap>
		<uv-grid :border="false" :col="2" @click="navTo">
			<uv-grid-item v-for="(item,index) in baseList" :key="index">
				<view class="gride">
					<image :src="`https://mp.lifecloud.top/static/images/`+(index+1)+`.jpg`"></image>
				</view>
			</uv-grid-item>
		</uv-grid>
		<uv-gap height="20rpx" bgColor="#f8f9ff"></uv-gap>
		<view class="mlr20 flex fdc bgwhite">
			<view class="f14 ptb20 plr10">设备场地</view>
			<uv-list>
				<uv-list-item  v-for="(item,index) in device" :key="index"
					:title="item.name" 
					:note="item.address"
					:clickable="true"
					thumb="https://mp.lifecloud.top/static/images/engine.jpg"
					thumb-size="lg" 
					:rightText="`设备数[`+item.device_num+`]···导航···`" @click="toLocation(item)">
				</uv-list-item>
			</uv-list>
		</view>
		<uv-tabbar :value="0" @change="tabbar">
			<uv-tabbar-item text="首页" icon="home"></uv-tabbar-item>
			<uv-tabbar-item>
				<template v-slot:text>
					<view class="flex pr tabcenter fdc">
						<uv-avatar src="https://mp.lifecloud.top/static/images/sao.png" size="50px"></uv-avatar>
						<view class="f12 blue">扫码洗车</view>
					</view>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
		</uv-tabbar>
	</view>
</template>
<script setup>
	import { util } from '/common/util.js';
	import { getCurrentInstance , ref , reactive,nextTick  } from 'vue';
	import { onLoad,onShow } from '@dcloudio/uni-app'
	const { proxy } = getCurrentInstance();
	const { $onLaunched } = proxy;
	//轮播图列表
	const banner = ref([]);
	const device=ref([]);
	const noticeArr = ref([]);
	const notice = ref([]);
	const baseList= ref([{
					name: 'map-fill',
					title: '设备场地'
				},{
					name: 'car-fill',
					title: '我要洗车'
				}, {
					name: 'gift-fill',
					title: '在线充值'
				}, {
					name: 'account-fill',
					title: '会员中心'
				}])
	//获取轮播图
	const getBanner =()=>{
		util.request({
			url:'/mpindex/banner',
			type:"POST",
		}).then((res)=>{
			if(res.code == 200){
				banner.value = res.data;
				console.log(banner);
			}
		})
	}
	const getNotice=()=>{
		util.request({
			url:'/mpindex/notice',
			type:"POST",
		}).then((res)=>{
			if(res.code == 200){
				noticeArr.value = res.data;
				res.data.forEach((item)=>{
					notice.value.push(item.title);
				})
			}
		})
	}
	const getPlace = () =>{
		util.request({
			url:'/mpindex/place',
			type:"POST",
		}).then((res)=>{
			if(res.code == 200){
				device.value = res.data;
			}
		})
	}
	//轮播图点击
	const swiperHandle = (e)=>{
		if(list.value[e].url != ''){
			uni.navigateTo({
				url:list.value[e].url,
			})
		}
		return false;
		
	};
	const noticeLink = (e) => {
		console.log(e);
		console.log(noticeArr.value[e]);
		const id = noticeArr.value[e].id;
		uni.navigateTo({
			url:'/pages/notice/notice?id='+id,
		})
	}
	const navTo = (e) => {
		console.log(e);
		if(e == 0){
			uni.navigateTo({
				url:'/pages/place/place'
			})
		}
		if(e == 1){
			scanQrcode()
		}
		if(e == 2){
			uni.navigateTo({
				url:'/pages/shop/shop'
			})
		}
		if(e == 3){
			if(!util.isLogin()){
				util.alert('请先登录');
				uni.setStorageSync('remount_url',JSON.stringify({
					type:'nav',
					page:'/pages/mine/mine',
				}))
				setTimeout(function(){
					uni.navigateTo({
						url:'/pages/login/login'
					})
				},1000);
				return
			}
			uni.navigateTo({
				url:'/pages/mine/mine'
			})
		}
	}
	const tabbar = (e)=>{
		if(e == '1'){
			scanQrcode();
		}
		if(e == '2'){
			if(!util.isLogin()){
				uni.setStorageSync('remount_url',JSON.stringify({
					type:'nav',
					page:'/pages/mine/mine',
				}))
				uni.navigateTo({
					url:"/pages/login/login"
				})
				return
			}
			uni.navigateTo({
				url:'/pages/mine/mine',
			})
		}
	}
	const toLocation = (item) =>{
		console.log(item);
		wx.openLocation({
			latitude: parseFloat( item.lat_lng[0] ),
			longitude:parseFloat( item.lat_lng[1] ),
			name:item.name+'洗车点',
			address:item.address,
			success:function(e){
				
			},
			fail:function(e){
				console.log(e)
			},
			complete() {
				console.log();
			}
		})
	}
	const scanQrcode = ()=>{
		wx.scanCode({
		  onlyFromCamera: true,
		  scanType:['qrCode'],
		  success (res) {
			  console.log(res);
			  if(res.errMsg == 'scanCode:ok'){
				  uni.navigateTo({
				  	url:'/pages/engine/engine?q='+encodeURIComponent(res.result),
				  })
			  }
		  }
		})
	}
	onLoad(async ()=>{
	    await $onLaunched;
		getBanner();
		getNotice();
		getPlace();
	});
</script>
<style lang="scss" scoped>
	.tabcenter{margin-top: -30px;}
	.gride{border: 5rpx solid #badafb; border-radius: 8rpx; width:360rpx;height:150rpx; margin-bottom: 10rpx;}
	.gride image{width:360rpx;height:150rpx;}
</style>
